<template>
  <div class="h-full flex flex-column">
    <div class="flex-shrink-0">
      <a-form-model
        :model="form"
        class="overflow-hidden myForm"
        layout="inline"
      >
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="Activity name">
              <a-input v-model="form.name" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item>
              <a-button type="primary" @click="onSubmit" icon="search"
                >搜索</a-button
              >
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>

    <div class="flex-1 h-0">
      <vxe-grid v-bind="gridOptions1" ref="dataTableRef">
        <template #toolbar_buttons>
          <a-button type="primary" @click="onAdd">新增</a-button>&nbsp;
          <a-button type="danger" @click="onDel">删除</a-button>&nbsp;
        </template>
        <template #operate="{ row }">
          <div>
            <a-button @click="() => onEdit(row)">编辑</a-button>&nbsp;
            <a-button type="danger">删除</a-button>
          </div>
        </template>
        <!-- 分页插槽 -->
        <template #pager>
          <vxe-pager
            :layouts="[
              'Sizes',
              'PrevJump',
              'PrevPage',
              'Number',
              'NextPage',
              'NextJump',
              'FullJump',
              'Total',
            ]"
            :current-page.sync="tablePage.currentPage"
            :page-size.sync="tablePage.pageSize"
            :total="tablePage.total"
            @page-change="handlePageChange"
          >
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      title: "新增",
      visible: false,
      editData: null,
      checkedRows: [],
      form: {
        name: "",
      },
      loading: false,
      tablePage: {
        total: 101,
        currentPage: 1,
        pageSize: 10,
      },
      tableColumn: [
        { type: "seq", width: 60 },
        { type: "checkbox", width: 50 },
        { field: "name", title: "Name" },
        { field: "nickname", title: "Nickname" },
        { field: "role", title: "Role" },
        { field: "address", title: "Address", showOverflow: true },
      ],
      gridOptions1: {
        loading: false,
        border: true,
        resizable: true,
        showOverflow: true,
        stripe: true,
        // height: auto的作用是让表格填充剩余所有高度. P.S. 如果父容器不是一个定高容器，那表格高度设置为auto会导致表格内容无限增长(flex:1的情况特别容易出现该问题)
        height: "auto",
        align: "left",
        toolbarConfig: {
          slots: {
            // 自定义工具栏模板
            buttons: "toolbar_buttons",
          },
        },
        columns: [
          { type: "checkbox", width: 50 },
          { type: "seq", width: 50 },
          { field: "name", title: "Name", width: 200 },
          { field: "school", title: "学校", width: 200 },
          { field: "sex", title: "Sex", width: 200, showHeaderOverflow: true },
          {
            field: "address",
            title: "Address",
            width: 200,
            showOverflow: true,
          },
          { field: "age", title: "年龄", width: 200, showOverflow: true },
          {
            title: "操作",
            slots: { default: "operate" },
            width: 200,
            fixed: "right",
          },
        ],
        data: [
          {
            id: 10001,
            name: "Test1",
            nickname: "T1",
            role: "Develop",
            sex: 1,
            age: 0,
            address:
              "Shenzhen Shenzhen Shenzhen Shenzhen Shenzhen Shenzhen Shenzhen Shenzhen",
          },
          {
            id: 10002,
            name: "Test2",
            nickname: "T2",
            role: "Test",
            sex: 2,
            age: 22,
            address: "Guangzhou",
          },
          {
            id: 10003,
            name: "Test3",
            nickname: "T3",
            role: "PM",
            sex: 1,
            age: 100,
            address: "Shanghai",
          },
          {
            id: 10004,
            name: "Test4",
            nickname: "T4",
            role: "Designer",
            sex: 2,
            age: 70,
            address: "Shenzhen",
          },
          {
            id: 10005,
            name: "Test5",
            nickname: "T5",
            role: "Develop",
            sex: 2,
            age: 10,
            address: "Shanghai",
          },
          {
            id: 10006,
            name: "Test6",
            nickname: "T6",
            role: "Designer",
            sex: 2,
            age: 90,
            address: "Shenzhen",
          },
          {
            id: 10007,
            name: "Test7",
            nickname: "T7",
            role: "Test",
            sex: 1,
            age: 5,
            address: "Shenzhen",
          },
          {
            id: 10008,
            name: "Test8",
            nickname: "T8",
            role: "Develop",
            sex: 1,
            age: 80,
            address: "Shenzhen",
          },
          {
            id: 10009,
            name: "Test8",
            nickname: "T8",
            role: "Develop",
            sex: 1,
            age: 80,
            address: "Shenzhen",
          },
          {
            id: 10010,
            name: "Test8",
            nickname: "T8",
            role: "Develop",
            sex: 1,
            age: 80,
            address: "Shenzhen",
          },
          {
            id: 10011,
            name: "Test8",
            nickname: "T8",
            role: "Develop",
            sex: 1,
            age: 80,
            address: "Shenzhen",
          },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      this.gridOptions1.loading = true;
      console.log(this.form);
      window.setTimeout(() => {
        this.gridOptions1.loading = false;
      }, 2000);
    },
    onEdit(row) {
      this.editData = {
        parentRes: "0-0-1",
        type: "menu",
        key: "abc",
        name: "name",
        path: "path",
        showOut: true,
        showIn: false,
      };
      this.title = "编辑";
      this.visible = true;
      console.log(row);
    },
    onDel() {
      this.checkedRows = this.$refs.dataTableRef.getCheckboxRecords();
      if (!this.checkedRows || this.checkedRows.length === 0) {
        this.$message.warning("请选择待删除数据");
      } else {
        // 请求后端删除接口，再重新刷新
        this.checkedRows = [];
        this.$refs.dataTableRef.clearCheckboxRow();
      }
    },
    onAdd() {
      this.editData = null;
      this.visible = true;
      this.title = "新增";
    },
    // 分页事件会触发的函数: currentPage：页号  pageSize：分页大小
    handlePageChange({ currentPage, pageSize }) {
      console.log(currentPage, pageSize);
    },
  },
};
</script>

<style scoped>
.myForm .ant-form-item {
  display: flex;
  flex-direction: row;
}
.myForm ::v-deep(.ant-form-item .ant-form-item-label) {
  flex-shrink: 0;
}
.myForm ::v-deep(.ant-form-item .ant-form-item-control-wrapper) {
  width: 0;
  flex: 1;
}
</style>
